<template>
  <div>
    <van-nav-bar fixed title="商户信息" left-arrow right-text="保存" @click-right="save" @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="mt-60 mlr-30 bg-white pos-r plr-40 pb-40 br-20">
        <div class="flex-v-c pos-r top--30">
          <headPortrait-box class="br-14 is-220" :head-portrait-url="store.Logo" />
          <div class="ml-30">
            <h1 class="fs-40 pt-40">{{ store.StoreName }}</h1>
            <span class="color-gray-light fs-28">门店编号：{{ store.CardNumber }}</span>
          </div>
        </div>
        <div v-for="(item,index) in list" :key="index" class="flex fs-28 mtb-40">
          <p class="color-gray-light pr-20 list-title">{{ item.title }}</p>
          <p>{{ item.value }}</p>
        </div>
        <div class="flex fs-28 mtb-40">
          <p class="color-gray-light pr-20 list-title">收银二维码</p>
          <img-box class="is-120" :img-url="store.CashQrcode" show-big-picture />
        </div>
        <div class="flex fs-28 mtb-40">
          <p class="color-gray-light pr-20 list-title">收银小程序码</p>
          <img-box class="is-120" :img-url="store.CashMpCode" show-big-picture />
        </div>
        <div class="flex-v-c fs-28 mtb-40">
          <p class="color-gray-light pr-20 list-title">播报设备ID</p>
          <input v-model="IotDeviceName" type="text " class="input">
          <svg-icon icon-class="scan" @goPage="scan" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import imgBox from 'components/imgBox'
import { GetInvitStoreInfo, BindDeviceName } from 'api/store'
export default {
  components: {
    headPortraitBox,
    imgBox
  },
  data() {
    return {
      store: {},
      list: [{ title: '商户等级' }, { title: '联系人' }, { title: '联系电话' }, { title: '所属地区' }, { title: '详细地址' }],
      IotDeviceName: '',
      StoreId: ''
    }
  },
  created() {
    this.StoreId = this.$route.params.id
    this.GetInvitStoreInfo()
  },
  methods: {
    GetInvitStoreInfo() {
      const params = { StoreId: this.StoreId }
      GetInvitStoreInfo(params).then(res => {
        if (res) {
          this.store = res.Data
          this.list[0].value = res.Data.GradeName
          this.list[1].value = res.Data.ContactName
          this.list[2].value = res.Data.ContactTel
          this.list[3].value = res.Data.ProvinceName + res.Data.CityName + res.Data.RegionName
          this.list[4].value = res.Data.ContactAddress
          this.IotDeviceName = res.Data.IotDeviceName
        }
      })
    },
    BindDeviceName() {
      const params = { StoreId: this.StoreId, IotDeviceName: this.IotDeviceName }
      BindDeviceName(params).then(res => {
        if (res) {
          this.$toast.success('保存成功')
        } else {
          this.$toast.fail('保存失败')
        }
      })
    },
    scan() {
      console.log('saoma')
      this.$utils.Qcode(0, function(res) {
        alert(res)
      })
    },
    save() {
      if (!this.IotDeviceName) {
        this.$toast.fail('请输入语音播报设备ID')
      } else {
        this.BindDeviceName()
      }
    }

  }
}
</script>
